<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ include file="../include/taglib.jsp"%>

<%
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragrma", "no-cache");
response.setDateHeader("Expires", 0);
Long resid = Long.parseLong(request.getParameter("id"));
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html style="height:100%;">
<head>
<title>指标趋势</title>
<%@ include file="../include/common.jsp"%>
<%@ include file="../include/jbox.jsp"%>


<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/style/default/select/jquery.multiselect.css" />
<link rel="stylesheet"  type="text/css" href="${pageContext.request.contextPath}/style/default/jqueryui/jquery-ui.css" />

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/calendar/zh_CN_WdatePicker.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery/jquery-ui.min.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/select/jquery.multiselect.min.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionCharts.js"></script>
	
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/charts/FusionChartsExportComponent.js"></script>
	
<script type="text/javascript">
  var chart; 
  var myExportComponent = new FusionChartsExportObject("fcExporter1", "${pageContext.request.contextPath}/resources/charts/FCExporter.swf");
  function dotrend(){
	  //$(form).find(":submit").attr("disabled", true).attr("value", "提交中"); 
	  
	  
	  var propIds = $('#propids').multiselect("widget").find('input:checked');
	  if(propIds.length==0){
		  return false;
	  }
	  var ids = '';
      propIds.each(function(){
    	    var vals = $(this).val().split(",");
	        ids += vals[0]+",";
	  });
      
      var dimen = $('#dimension').val();
        var timeSection = $('#fixtime').attr('value');
        var beginDate = '';//$('#beginDate').val();
		var endDate = '';//$('#endDate').val();
		if(timeSection ==4){
			if(dimen == 1){
				beginDate = $('#beginDate').val();
				endDate=$('#endDate').val();
				if(beginDate==''||endDate==''){
					return false;
				}
			}else{
				beginDate = $('#beginDate2').val();
				endDate=$('#endDate2').val();
				if(beginDate==''||endDate==''){
					return false;
				}
			}
		}
      
      
      ids = ids.substring(0,ids.length-1);
	 
      $('#saveBt').attr("disabled", true).text("提交中");
	  $.ajax({
			url : 'prop-trend!createTrend.action', 
			type : 'POST',
			dataType : "json",
			data : {
				dimen:$('#dimension').find('option:selected').val(),
				trendtype:$('#trendtype').find('option:selected').val(),
				timeSection:$('#fixtime').attr('value'),
				resId :<%=resid %>,
				beginDate:beginDate,
				endDate:endDate,
				propIds:ids
			},
			success : function(data) {
				if(data.size==0){
					$('#trend').css('display','none');
					$('#nodata').css('display','');
				}else{
					$('#nodata').css('display','none');
					$('#trend').css('display','');
					
					if(typeof chart ==undefined || chart ==null){
			            chart = new FusionCharts("${pageContext.request.contextPath}/resources/charts/MSSpline.swf", "ChartId", "99%", "100%", "0", "0");

						//chart = new FusionCharts("${pageContext.request.contextPath}/resources/charts/ZoomLine.swf", "ChartId", "99%", "100%", "0", "0");
					}
					
					chart.setJSONData(data.value);	   
					//chart.setXMLUrl("${pageContext.request.contextPath}/resources/charts/MALine2.xml");
					chart.render("trend");
					
					//Customize the component properties
					//Width and height
					myExportComponent.componentAttributes.width = '300';
					myExportComponent.componentAttributes.height = '40';
					//Background color
					//Background color
					myExportComponent.componentAttributes.bgColor = 'ffffff';
					//Border properties
					myExportComponent.componentAttributes.borderThickness = '2';
					myExportComponent.componentAttributes.borderColor = '0372AB';
					//Font properties
					myExportComponent.componentAttributes.fontFace = 'Arial';
					myExportComponent.componentAttributes.fontColor = '0372AB';
					myExportComponent.componentAttributes.fontSize = '12';
					//Message - caption of export component
					//Button visual configuration
					myExportComponent.componentAttributes.btnWidth = '200';
					myExportComponent.componentAttributes.btnHeight= '25';
					myExportComponent.componentAttributes.btnColor = 'E1f5ff';
					myExportComponent.componentAttributes.btnBorderColor = '0372AB';
					//Button font properties
					myExportComponent.componentAttributes.btnFontFace = 'Verdana';
					myExportComponent.componentAttributes.btnFontColor = '0372AB';
					myExportComponent.componentAttributes.btnFontSize = '15';
					//Title of button
					myExportComponent.componentAttributes.btnsavetitle = '保存图表'
					myExportComponent.componentAttributes.btndisabledtitle = ' 提示:图表右键菜单可以将此图表导出 ! ';
					//Render the exporter SWF in our DIV fcexpDiv
					myExportComponent.Render("exportDiv");
				}
				$('#saveBt').attr("disabled", false).text("提交");
			},
			complete:function(){
				
			}
		});
     }
  
  
	//改变时间范围
	function changetime(){
		var dim = $('#dimension').val();
		var timeSection = $('#fixtime').attr('value');
		if(timeSection !=4){
			$('#countScope').css('display','none')
			dotrend();
		}else{
			$('#countScope').css('display','');
			if(dim == 1){
				$('#dayData').hide();
			  	$('#houseData').show();
			}else{
				$('#dayData').show();
			  	$('#houseData').hide();
			}
			initDate();
		}
	}
	
	
  
  function changedimen(){
		var dim = $('#dimension').find('option:selected').val();
		$('#countScope').css('display','none');
		 if(dim ==1 || dim ==0){
			$('#fixtime option').remove();
			$('#fixtime').append('<option value="0">今天</option> ');
			$('#fixtime').append('<option value="1">昨天</option> ');
			$('#fixtime').append('<option value="2">本周</option> ');
			$('#fixtime').append('<option value="3">本月</option> ');
			$('#fixtime').append('<option value="4">自定义</option> ');
		}else if(dim =2){
			$('#fixtime option').remove();
			$('#fixtime').append('<option value="2">本周</option> ');
			$('#fixtime').append('<option value="3">本月</option> ');
			$('#fixtime').append('<option value="4">自定义</option> ');
		}
		 $('#fixtime > option:first').attr('selected','selected');
		 $('#fixtime > option:selected').change();
	}
  
  function add_zero(temp)
	{
		 if(temp<10) 
		 		return "0"+temp;
		 else 
		 		return temp;
	}
  
  function initDate(){
		var currentDate =new Date();
		//赋默认值
		if($('#dimension').val()== 1){
			$('#beginDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" 00");
			$('#endDate').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate())+" "+add_zero(currentDate.getHours())+"");
		}else{
			$('#beginDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
			$('#endDate2').val(currentDate.getFullYear()+"-"+add_zero(currentDate.getMonth()+1)+"-"+add_zero(currentDate.getDate()));
		}
	}
  
  
  	function changetype(){
  		dotrend();
  	}
  	
  	
	$(function(){
		$('#fixtime > option:first').attr('selected','selected');
		$('#fixtime > option:selected').change();
		
		$.ajax({
			url : 'prop-trend!getPropGroup.action', // 
			type : 'POST',
			dataType : "json",
			data : {
				resId : <%=resid %>
			},
			success : function(data) {
				var cnt = 0;
				$.each(data, function(i, index) {
					$('#propids').append('<optgroup  id='+i+' label=单位:'+index.unit+'>');
					if(cnt<1){
						$.each(index.data,function(j,jndex){
							if(j<2){
								$('#'+i).append('<option   value='+jndex.id+','+jndex.name+','+index.unit+' selected="selected">' + jndex.name+ '</option> ');
							}else{
								$('#'+i).append('<option   value='+jndex.id+','+jndex.name+','+index.unit+'>' + jndex.name+ '</option> ');
							}
						});
					}else{
						$.each(index.data,function(j,jndex){
							$('#'+i).append('<option   value='+jndex.id+','+jndex.name+','+index.unit+'>' + jndex.name+ '</option> ');
						});
					}
					$('#propids').append('</optgroup>');
					cnt++;
		       });
				
			   var tmp ='';
			   $('#propids').multiselect({
				 needCheckAll:0,
				 tips: "提示:不能选择单位不同的两种指标! ",
				 selectedList: 2,
				 click: function(e){
					    var tmps=[];
					    $(this).multiselect("widget").find("input:checked").each(function(){
					    	var valss = $(this).val().split(",");
					    	tmps.push(valss[2]);
					    });
					    $.unique(tmps);
					     if(tmps.length>1){
					    	 return false;
					    }
				 }
			   });
			   
			   $('#saveBt').click();
			}
		});
	});
	
	
</script>
</head>

<body style="width:100%;height:98%;">
      <div class="searchFormStyle">
	       <div style="width:100%;">
	       	   <div style="float:left;width:auto;">
		    	   <label>数据维度：</label>
		    	    <select id="dimension" name="dimension" class="select" style="width:100px;text-align:center;"  onchange="changedimen(); ">  
		    			<option value="1" >时汇聚数据 </option>
		    			<option value="2" >日汇聚数据</option>
		    			<option value="0" >原始数据 </option>
		    		</select>
		       </div>
		       <div style="float:left;width:auto;margin-left:10px;">
		    	     <label>趋势类型：</label>
		    	    <select id="trendtype" name="trendtype" class="select" style="width:100px;text-align:center;" onchange="changetype()" >  
		    			<option value="0" >均值趋势 </option>
		    			<option value="1" >峰值趋势</option>
		    			<option value="2" >谷值趋势</option>
		    		</select>
		       </div>
		       <div style="float:left;width:auto;margin-left:10px;">
		    	    <label>时间范围：</label>
		    	    <select id="fixtime" name="fixtime" class="select" style="width:100px;text-align:center;" onchange="changetime();">  
		    			<option value="0" >今天</option>
		    			<option value="1" >昨天  </option>
		    			<option value="2" >本周 </option>
		    			<option value="3" >本月 </option>
		    			<option value="4" >自定义 </option>
		    		</select>
		    	</div>
		    	<div style="float:left;width:auto;margin-left:10px;display:none" id="countScope">
				   <span id="houseData">
			   			<input id="beginDate" name="beginDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH',maxDate:'%y-%M-%d %H',readOnly:true})"/>
						<label>-</label>
						<input id="endDate" name="endDate" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH',maxDate:'%y-%M-%d %H',minDate:$('#beginDate').val(),readOnly:true})"/>
		   		   </span>
		   		   <span id="dayData" style="display: none;">
			   		   	 <input id="beginDate2" name="beginDate2" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',readOnly:true})"/>
						 <label>-</label>
						 <input id="endDate2" name="endDate2" class="Wdate" type="text" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:$('#beginDate2').val(),readOnly:true})"/>
		   		   </span>
		    	</div>
	      </div>
	      <div style="margin-top:5px; margin-bottom:5px;" >
		      	<span style="padding-left:4px;">选择指标：</span>
		      	<span style="margin-left:-2px;">
		      	   <select id="propids" name="propids" multiple="multiple" size="1"  class="select" style="width:456px;text-align:center;" >  
		      	      
		      	   </select>
		      	</span>
		      	<span style="width:50px"></span>
		      	<span>
		      		<button type="button" id="saveBt" value="提交" onclick="dotrend();" class="btn-4">提交</button>
		      	</span>
	      </div>
    </div>
	
	 
	<div id="trend" style="width:99%;height:75%;">
	
	</div>
	
	<div id="nodata" style="width:70%;height:60%;display:none;">
	     <img style="width:100%;height:100%;" id='nodata' src='${pageContext.request.contextPath}/style/default/bsm/images/no_res_prop_msg.png'/>	
	</div>
	
	<div id ="exportDiv"></div>
	
	
</body>
</html>